<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        .label_select {
            width: 100px;
            height: 30px;
            font-size: 18px;
            font-weight: bold;
            background: rgb(107, 167, 235);
            border-radius: 5px;
            line-height: 30px;
            text-align: center;
        }

        .show_div {
            height: 300px;
            width: 500px;
            margin: auto;
            background: #e6e6e6;
            margin-top: 50px;
            margin-bottom: 50px;
        }

        .show_div img,
        .show_div video {
            width: 100%;
            height: 100%;
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <label for="select_file" style="display: block; width: 100px;margin: auto;">
            <div class="label_select">选择文件</div>
        </label>
        <input style="display: none;" type="file" id="select_file" accept="image/*,video/*">
        <div class="show_div">
            <img id="imgs" src="" alt="">
            <video controls id="videos" src=""></video>
        </div>
        <div style="width: 300px;margin: auto;text-align: center;"><button type="button">发送</button></div>
    </div>



    <script>
        window.onload = function () {
            var files = '';
            $('#select_file').change(function () {

                // //创建一个读取文件的对象
                // var fileReader = new FileReader();

                // //读取文件需要时间
                // fileReader.readAsDataURL((this.files[0]));

                // //等待上一步读完文件之后，把图片进行上传
                // fileReader.onload = function () {
                //     $("#avader").attr("src", fileReader.result);
                // }
                files = this.files[0];
                //使用blob上传
                var src = URL.createObjectURL(files);
                blob = new Blob([JSON.stringify(files, null, 2)], { type: 'application/json' });
                console.log(this.files);
                console.log(blob);
                if (files.type.split('/')[0] == 'image') {
                    $('#imgs').attr('src', src).css('display', 'block')
                    $('#videos').css('display', 'none')
                } else {
                    $('#videos').attr('src', src).css('display', 'block')
                    $('#imgs').css('display', 'none')
                }
                this.value = ''
            })
            $('[type="button"]').on('click', function () {
                var formdata = new FormData()
                formdata.append('file', blob, '1.json');
                formdata.append('video', files)
                var xhr = new XMLHttpRequest();
                xhr.open("post", "http://127.0.0.1/adv");
                xhr.send(formdata);
                xhr.onload = function (res) {
                    if (xhr.status == 200) {
                        //...
                    }
                    console.log(res);
                }
                // formdata.forEach((value, key) => {
                //     console.log(value);
                // })
            })
        }

    </script>
    <!-- <script>
       
    </script> -->
    <!-- <script>
        $("#publishArticle").click(function () {
            var formdata = new FormData();
            formdata.append("title", $("#articleTitle").val());
            formdata.append("typeId", $("#articleCategory option:selected").val());
            formdata.append("img", $('#id_avatar')[0].files[0]);
            $.ajax({
                type: "POST",
                url: 'http://127.0.0.1:8000/home/v1/md/',
                data: formdata,
                dataType: 'json',
                cache: false,//上传文件不需要缓存

                //使用ajax传文件必须要使用下面两个
                processData: false,//告诉JQuery不处理发送的数据
                contentType: false,//告诉JQuery不设置Content-Type请求头
                success: function (arg) {
                    //debugger;
                    alert('成功发布')
                }
            })
        })
    </script> -->


</body>
</html>